﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="BlockStylePicTemplate.ItemDetailPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BlockStylePicTemplate"
    xmlns:data="using:BlockStylePicTemplate.Data"
    xmlns:common="using:BlockStylePicTemplate.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.BottomAppBar>
        <AppBar x:Name="BottamApp" Padding="10,0,10,0" MinHeight="90" Background="#FF670202" BorderBrush="#FF670202">
            <StackPanel Margin="60,5,0,5" Orientation="Horizontal">
                <!--<Button x:Name="btnShare" HorizontalAlignment="Left" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Height="75" Margin="0,0,40,0">
                    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="75"/>
                        </Grid.RowDefinitions>
                        <Image Source="Assets/AppBar/BtmAppBarBtn1.png" Margin="0" Height="61"/>
                    </Grid>
                </Button>-->
                <Button x:Name="btnAdd" HorizontalAlignment="Left" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Height="75" Margin="0,0,40,0">
                    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="75"/>
                        </Grid.RowDefinitions>
                        <Image Source="Assets/AppBar/BtmAppBarBtn2.png" Margin="0" Height="61"/>
                    </Grid>
                </Button>
                <Button x:Name="btnRemove" HorizontalAlignment="Left" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Height="75" Margin="0,0,40,0">
                    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="75"/>
                        </Grid.RowDefinitions>
                        <Image Source="Assets/AppBar/BtmAppBarBtn3.png" Margin="0" Height="61"/>
                    </Grid>
                </Button>
            </StackPanel>
        </AppBar>
    </Page.BottomAppBar>

    <Page.Resources>

        <!--
            Collection of grouped items displayed by this page, bound to a subset
            of the complete item list because items in groups cannot be virtualized
        -->
        <CollectionViewSource
            x:Name="groupedItemsViewSource"
            Source="{Binding Groups}"
            IsSourceGrouped="true"
            ItemsPath="Items"
            d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:ItemDetailDataSource, IsDesignTimeCreatable=True}}"/>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.Background>
            <ImageBrush ImageSource="Assets/ItemDetailPage/Bg2.jpg"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Image x:Name="BgImage" Grid.RowSpan="2" Source="Assets/ItemDetailPage/imageTrans.png" HorizontalAlignment="Left"/>

        <!-- Vertical scrolling list only used when snapped -->
        <ListView
            x:Name="itemListView"
            AutomationProperties.AutomationId="ItemListView"
            AutomationProperties.Name="Grouped Items"
            Grid.Row="1"
            Visibility="Collapsed"
            Margin="0,-10,0,0"
            Padding="10,0,0,60"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
            ItemTemplate="{StaticResource SnapItemDetailItemTemplate}"
            SelectionMode="None"
            IsSwipeEnabled="false"
            IsItemClickEnabled="True"
            ItemClick="ItemView_ItemClick">

            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="7,7,0,0">
                                <!-- <Button
                                    AutomationProperties.Name="Group Title"
                                    Click="Header_Click"
                                    Style="{StaticResource TextPrimaryButtonStyle}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                        <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
                                    </StackPanel>
                                </Button>-->
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ListView.GroupStyle>
        </ListView>

        <!-- Horizontal scrolling grid used in most view states -->
        <ScrollViewer x:Name="scrollViewer" Grid.RowSpan="2" Background="#00FFDCDC" Style="{StaticResource HorizontalScrollViewerStyle}">
            <Grid x:Name="grdMain">
                <Grid.RowDefinitions>
                    <RowDefinition Height="180"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="645"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid Background="#FF490303" Grid.Row="1" Margin="120,0,0,300"></Grid>
                <GridView
        			x:Name="itemGridView"
        			AutomationProperties.AutomationId="ItemGridView"
        			AutomationProperties.Name="Grouped Items"
        			Padding="20,0,40,78"
        			ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
        			ItemTemplate="{StaticResource ItemDetailItemTemplate}"
        			SelectionMode="None"
        			IsSwipeEnabled="false"
        			IsItemClickEnabled="True"
        			ItemClick="ItemView_ItemClick" Margin="0,0,14,0" Grid.Row="1" Grid.Column="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled">

                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Grid Margin="1,0,0,6">
                                        <!-- <Button
                                    AutomationProperties.Name="Group Title"
                                    Click="Header_Click"
                                    Style="{StaticResource TextPrimaryButtonStyle}" >
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                        <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
                                    </StackPanel>
                                </Button>-->

                                    </Grid>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </GridView.GroupStyle>
                </GridView>
                <Grid x:Name="grid" Grid.Row="1" Width="525" Margin="120,0,0,140" VerticalAlignment="Bottom" Height="152" Background="#FF490303">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="10"/>
                        <ColumnDefinition Width="160"/>
                        <ColumnDefinition Width="5"/>
                        <ColumnDefinition Width="270"/>
                        <ColumnDefinition Width="10"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="36"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="10"/>
                    </Grid.RowDefinitions>
                    <StackPanel Grid.Row="1" Grid.Column="1" Background="#FF670202">
                        <StackPanel x:Name="spTweets" Margin="5" Orientation="Horizontal">
                            <TextBlock Text="324" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="0,0,5,0" FontSize="20"/>
                            <TextBlock Text="Tweets" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" FontSize="20"/>
                        </StackPanel>
                        <StackPanel x:Name="spFollowing" Margin="5" Orientation="Horizontal">
                            <TextBlock Text="18 " Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="0,0,5,0" FontSize="20"/>
                            <TextBlock Text="Following" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" FontSize="20"/>
                        </StackPanel>
                        <StackPanel x:Name="spFollowing_Copy" Margin="5" Orientation="Horizontal">
                            <TextBlock Text="2,129" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="0,0,5,0" FontSize="20"/>
                            <TextBlock Text="Followers" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" FontSize="20"/>
                        </StackPanel>
                    </StackPanel>
                    <Grid Grid.Row="1" Grid.Column="3" Background="#FF670202">
                        <TextBlock TextWrapping="Wrap" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="20" Margin="5">
        					<Run Text="Wild animals are..."/>
        					<LineBreak/>
        					<Run Text="Africa"/>
        					<LineBreak/>
        					<Run Text="http://wildanimals.com"/>
                        </TextBlock>
                    </Grid>
                    <Image Grid.Column="5" Grid.RowSpan="3" VerticalAlignment="Top" Source="Assets/ItemDetailPage/RbnIconBig.png"/>
                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Wild animals in forest" VerticalAlignment="Center" Grid.ColumnSpan="4" Grid.Column="1" FontSize="24" FontFamily="Segoe UI" FontWeight="Light"/>
                </Grid>
            </Grid>
        </ScrollViewer>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
            <Image x:Name="image" HorizontalAlignment="Right" VerticalAlignment="Center" Width="212" Source="Assets/Logo.png" Margin="0,0,40,0" Grid.Column="1"/>
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="96,137,10,56"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BottamApp">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="grid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BgImage">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="scrollViewer">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
